<template>
  <div class="ui-timeline-skeleton">
    <div
      class="ui-timeline-skeleton__group"
      v-for="index in 2"
      :key="index"
    >
      <div class="ui-timeline-skeleton__group-head">
        <ui-skeleton width="150px" height="24px"></ui-skeleton>
      </div>
      <div class="ui-timeline-skeleton__group-body">
        <div
          class="ui-timeline-skeleton__item"
          v-for="index in 3"
          :key="index"
        >
          <div class="ui-timeline-skeleton__item-point"></div>
          <div class="ui-timeline-skeleton__item-time">
            <ui-skeleton width="60px" height="24px"></ui-skeleton>
          </div>
          <div class="ui-timeline-skeleton__item-main">
            <div class="ui-timeline-skeleton__item-avatar">
              <ui-skeleton width="36px" height="36px" radius="18px"></ui-skeleton>
            </div>
            <div class="ui-timeline-skeleton__item-fields">
              <div class="ui-timeline-skeleton__item-title">
                <ui-skeleton width="240px" height="24px"></ui-skeleton>
              </div>
              <div class="ui-timeline-skeleton__item-detial">
                <ui-skeleton width="120px" height="24px"></ui-skeleton>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import UiSkeleton from '../skeleton'

export default {
  name: 'UiTimelineSkeleton',
  components: {
    UiSkeleton
  }
}
</script>
<style lang="less">
.ui-timeline-skeleton__group{
  margin-bottom: 36px;
  &:last-child{
    margin-bottom: 0;
  }
}
.ui-timeline-skeleton__group-head{
  margin-bottom: 24px;
}
.ui-timeline-skeleton__item{
  display: flex;
  flex-direction: row;
  position: relative;
  &:not(:last-child) {
    padding-bottom: 24px;
    &:after {
      content: '';
      position: absolute;
      top: 12px;
      bottom: -12px;
      width: 1px;
      left: 28px;
      background-color: #f8f8f9;
    }
  }
}
.ui-timeline-skeleton__item-main{
  display: flex;
  flex-direction: row;
}
.ui-timeline-skeleton__item-time{
  margin-left: 24px;
  margin-right: 24px;
  margin-top: 5px;
}
.ui-timeline-skeleton__item-avatar{
  margin-right: 24px;
}
.ui-timeline-skeleton__item-title{
  margin-bottom: 12px;
}
.ui-timeline-skeleton__item-point{
  width: 9px;
  height: 9px;
  background-color: #f8f8f9;
  border-radius: 50%;
  margin-top: 12px;
  margin-left: 24px;
}
</style>
